<#macro scriptMacro>
  <script>
    layui.use(['form', 'table'], function () {
      var $ = layui.jquery,
          form = layui.form,
          table = layui.table;

      table.render({
        elem: '#tagListTable',
        request: {
          pageName: 'current',
          limitName: 'size'
        },
        where: {
          tagName: $('input[name=tagName]').val(),
          tagStatus: $('select[name=tagStatus]').val()
        },
        url: '${request.contextPath}/tag/pageByQuery',
        toolbar: '#tagTopToolBar',
        defaultToolbar: ['filter'],
        cols: [[
          {field: 'id', width: 100, title: 'ID'},
          {field: 'tagName', width: 200, title: '标签名称'},
          {
            field: 'tagIcon',
            width: 250,
            title: '图标',
            templet: '<div><i class="{{d.tagIcon}}" style="font-size:16px;width: 20px;text-align: center"></i> {{d.tagIcon}}</div>'
          },
          {field: 'tagCss', width: 200, title: '特殊样式'},
          {field: 'tagCss', width: 200, title: '预览', templet: '#tagPreviewTpl'},
          {
            field: 'tagStatusDesc', width: 150, title: '状态',
            templet: '<div><span class="layui-badge layui-bg-{{ d.tagStatus }}">{{ d.tagStatusDesc }}</span></div>'
          },
          {
            title: '创建时间',
            minWidth: 200,
            sort: true,
            templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'
          },
          {title: '操作', minWidth: 150, toolbar: '#currentTableBar'}
        ]],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 10,
        page: true,
        skin: 'line',
        parseData: function (res) {
          var page = res.data;
          if (page) {
            currentPage = page.current;
            return {
              "code": res.code,
              "msg": res.msg,
              "count": page.total,
              "data": page.records
            }
          } else {
            return {
              "code": res.code,
              "msg": res.msg
            }
          }
        },
      });

      table.on('toolbar(tagListTableFilter)', function (obj) {
        if (obj.event === 'add') {
          layer.open({
            type: 2,
            title: '添加标签',
            anim: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['500px', '400px'],
            content: '/tag/save'
          });
        }
      })

      table.on('tool(tagListTableFilter)', function (obj) {
        var data = obj.data;
        if (obj.event === 'edit') {
          layer.open({
            type: 2,
            title: '添加标签',
            anim: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['500px', '450px'],
            content: '/tag/save?tagId=' + data.id
          });
          return false;
        } else if (obj.event === 'delete') {
          layer.confirm('真的删除行么', function (index) {
            $.post("${request.contextPath}/tag/delete", {
              id: data.id
            }, function (result) {
              layMsg(result.msg);
              if (result.success) {
                layer.close(index);
                reloadTable();
              }
            })
          });
        } else if (obj.event === 'active' || obj.event === 'forbid') {
          $.post("${request.contextPath}/tag/toggleActive", {
            id: data.id
          }, function (result) {
            layMsg(result.msg);
            if (result.success) {
              reloadTable();
            }
          })
        }
      })

      $("#search-btn").on('click', function () {
        reloadTable(1);
      })
    });

    var currentPage = 1;

    function reloadTable(page) {
      layui.use('table', function () {
        var $ = layui.jquery, table = layui.table;
        //执行搜索重载
        table.reload('tagListTable', {
          page: {
            curr: page ? page : currentPage
          }
          , where: {
            tagName: $('input[name=tagName]').val(),
            tagStatus: $('select[name=tagStatus]').val()
          }
        }, true);
      })
    }
  </script>
</#macro>
<@zlt.page title="文章列表" scriptMacro=scriptMacro>
  <body>
  <div class="layuimini-container">
    <div class="layuimini-main">
      <fieldset class="table-search-fieldset">
        <legend>搜索信息</legend>
        <form class="layui-form" id="searchForm">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">标签名称</label>
              <div class="layui-input-inline">
                <input type="text" name="tagName" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">状态</label>
              <div class="layui-input-inline">
                <select name="tagStatus">
                  <option value="">请选择状态</option>
                    <#list states as s>
                      <option value="${s.value}">${s.desc}</option>
                    </#list>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <button type="button" id="search-btn" class="layui-btn layui-btn-primary loading-btn"
                      data-reset-time="1000"><i class="layui-icon"></i> 搜 索
              </button>
            </div>
          </div>
        </form>
      </fieldset>

      <script type="text/html" id="tagTopToolBar">
        <div class="layui-btn-container">
          <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"> 新建标签</a>
        </div>
      </script>

      <table class="layui-hide" id="tagListTable" lay-filter="tagListTableFilter"></table>

      <script type="text/html" id="tagPreviewTpl">
        <span style='{{d.tagCss}};font-size:12px;'><i class='{{d.tagIcon?d.tagIcon:"fa fa-tag"}}'></i> {{d.tagName}}</span>
      </script>
      <script type="text/html" id="currentTableBar">
        {{# if(!d.normal){ }}
        <a class="layui-btn layui-btn-xs" lay-event="active">启用</a>
        {{# } else { }}
        <a class="layui-btn layui-btn-xs" lay-event="forbid">禁用</a>
        {{# } }}

        {{# if(!d.deleted){ }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
        {{# } }}
        <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
      </script>
    </div>
  </div>
  </body>
</@zlt.page>